//查看当前的的json数据
// console.log(data);
//查看当前的localStorage的值
// console.log(JSON.parse(localStorage.parData));
//把当前的localStorage的值变成对象
var goodsObj = JSON.parse(localStorage.parData);
// console.log(goodsObj);
// --------------------------渲染页面------------------------------------------------------
let cart_top = document.querySelector(".cart_top")
let boxObj = document.querySelector(".box123")
let html = '';
//循环遍历数组
data.forEach((star, moun) => {
    goodsObj.forEach((val, key) => {
            if (star.proId === val.id) {
                // console.log(star.proId === val.id);
                html += `
            <div class="cart_middle" id="${val.id}">
                <div class="checkone">
                    <input type="checkbox" class="check">
                </div>
                <div class="checkpic">
                    <img src="${star.proImg}" alt="">
                </div>
                <div class="checklist">
                    <ul>
                        <li class="em one">${star.proName}</li>  
                    </ul>
                    <div class="icon_b">
                        <a href="" class="icon_b_one">
                            <i class="iconfont">&#xe61c;</i>
                        </a>
                        <a href="" class="icon_b_two">
                            <i class="iconfont">&#xe698;</i>
                        </a>
                    </div>
                </div>
                <div class="checkprice">
                    <div class="newprice">
                        <span>¥</span>
                        <a>143.33</a>
                    </div>
                    <div class="oldprice">
                        <span>*</span>
                        <a>暂无</a>
                    </div>
                </div>
                <div class="checknum">
                    <a href="#">-</a>
                    <span>${val.num}</span>
                    <a href="#">+</a>
                </div>
                <div class="checkber">
                    <div class="checkber_price">
                        <a href="#"></a>
                        <a href="#" class="prices">${star.newprice}</a>
                    </div>
                </div>
                <i class="iconfont clearbox" id="clearbox" onclick="Fun(this)">&#xe696;</i>
        </div>
            `
            }
        })
        // console.log(html);
        // console.log(boxObj);
})
boxObj.innerHTML = html;
/* ------------------------------获取总价和商品数量-------------------------------------- */
//数量
let spnum = document.querySelector(".spnum");
let prcnum = document.querySelector(".prcnum");
let prices = document.querySelectorAll(".prices")
let sum = 0;
let prc = 0;

prices.forEach((val, key) => {
    let dd = Number(val.innerHTML.split("￥")[1])
    prc += goodsObj[key].num * dd
})
goodsObj.forEach((val, key) => {
    sum += Number(val.num);
})

spnum.innerHTML = sum;
prcnum.innerHTML = prc;

// --------------------------------删除按钮------------------------------------------
let clearbox = document.querySelectorAll("#clearbox");
// console.log(clearbox);
let parentBox = document.querySelectorAll(".cart_middle");
// console.log(parentBox);

function Fun(that) {
    //删除内容
    that.parentNode.remove();
    let idname = that.parentNode.id
    let aee = JSON.parse(localStorage.parData)
    console.log(aee);
    //删除localStorage里面的值
    for (var i = 0; i < aee.length; i++) {
        // console.log(aee[i]);
        // console.log(aee[i].id);
        if (aee[i].id === idname) {
            aee.splice(i, 1)
        }
    }
    localStorage.setItem("parData", JSON.stringify(aee))
    location.reload()
}


/*------------------------- 设置复选框---------------------------------------*/
// 获取元素,顶部的input框
var bigCheck = document.querySelector('.cart_top>.check');
// console.log(bigCheck);
// 下面的input的框
var smallCheck = document.querySelectorAll('.cart_middle .check');
// console.log(smallCheck);
//1.设置全选框选中,下面的每一个小框都会被选中该
bigCheck.addEventListener('click', bigCheckFn);

function bigCheckFn() {
    var type = bigCheck.checked;
    for (var i = 0; i < smallCheck.length; i++) {
        smallCheck[i].checked = type;
    }
};
//2.设置下面的单独,如果所有的都选中,就给大的选中
//2.1循环所有的小checked,读取当中的属性值和下标
smallCheck.forEach((i, k) => {
    // console.log(i, k);
    smallCheck[k].addEventListener('click', smallCheckFn);
    // 2.2  给每一个小复选框绑定事件
    function smallCheckFn() {
        var flag = true;
        smallCheck.forEach(function(key) {
                if (!key.checked) flag = false
            })
            // console.log(flag);
        bigCheck.checked = flag
    }
})

/* -------------------------设置登录首位-------------------------------------- */
var userMsg = localStorage.getItem("userMsg") ? JSON.parse(localStorage.getItem("userMsg")) : {};
if (localStorage.getItem("userMsg")) {
    if ((userMsg.msg).isLogin === "ok") {
        $("#hide").hide()
        $("#same").show()
        $("#newname").html((userMsg.msg).username)
    } else {
        $("#hide").show()
        $("#same").hide()
        $("#dc").hide()
    }
}
$("#dc").click(function() {
    localStorage.removeItem("userMsg");
    location.href = "http://10.11.63.68:3000/www/login.html";
    $("#dc").hide()
});